<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品信息</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/treeTable.css">
        <script src="../js/global.js">
        <script src="../js/jquery.min.js"></script>
        <script src="layui/layui.js"></script>
    </head>
	<body>
	
	
	<!-- 条件查询 -->
<div class="page-wrapper">
	<div class="layui-btn-container" style="display: inline-block;">
        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe668;</i>展开全部
        </button>
        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe66b;</i>折叠全部
        </button>
    </div>
    <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary" style=" margin-left: 400px;">
            <i class="layui-icon">&#xe666;</i>刷新
    </button>
    <div class="demo-side">
        <table id="demoTreeTb"></table>
    </div>
</div>

<!-- 添加的表单 -->
<form id="A_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
  <div class="layui-form-item">
    <label class="layui-form-label">模块名称</label>
    <div class="layui-input-inline">
      <input type="text" name="name" id="A_typeBlurEvent" required  lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">
        <span class="x-red" id="A_verifyTypeName" lay-verify="alikeTypeName">*</span>
    </div>
  </div>
  <div class="layui-form-item" id="Lay_one_Level">
	    <label class="layui-form-label">分类级别</label>
	    <div class="layui-input-inline">
	        <select name="parentId" id="one_Level" lay-verify="required" lay-filter="A_classIdLevel_one">
	            <option value=""></option>
	            <option value="0" >一级分类</option>
	            <option value="1">二级分类</option>
	        </select>
	    </div>
	</div>
	
	<div class="layui-form-item" style="display: none;" id="Lay_two_Level">
	    <label class="layui-form-label">所属一级类</label>
	    <div class="layui-input-inline">
	        <select name="parentId" id="two_Level" lay-verify="required" lay-filter="A_classIdLevel_two">
	            <option value="" selected>请选择</option>
	        </select>
	    </div>
	</div>
  <div class="layui-form-item">
    <label class="layui-form-label">模块路径</label>
    <div class="layui-input-inline">
      <input type="text" name="path" placeholder="请输入模块路径" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">添加</button>
      <button type="reset" id="A_reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- 修改的表单 -->
<form id="U_form" lay-filter="U_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
	<input type="hidden" name="id" />
  <div class="layui-form-item">
    <label class="layui-form-label">模块名称</label>
    <div class="layui-input-inline">
      <input type="text" name="name" id="U_typeBlurEvent" required  lay-verify="required" placeholder="请输入类型名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">
        <span class="x-red" id="U_verifyTypeName" lay-verify="alikeTypeName">*</span>
    </div>
  </div>
  <div class="layui-form-item" id="U_Lay_one_Level">
       <label class="layui-form-label">分类级别</label>
       <div class="layui-input-inline">
           <select name="parentId" id="U_one_Level"  lay-verify="required" lay-filter="U_classIdLevel_one">
               <!--<option value=""></option>-->
               <option value="0" >一级分类</option>
               <option value="1">二级分类</option>
           </select>
       </div>
   </div>
   <div class="layui-form-item" style="display: none;" id="U_Lay_two_Level">
       <label class="layui-form-label">所属一级类</label>
       <div class="layui-input-inline">
           <select name="parentId" id="U_two_Level" required lay-verify="required" lay-filter="U_classIdLevel_two">
               <option value="" selected>请选择</option>
           </select>
       </div>
   </div>
  <div class="layui-form-item">
    <label class="layui-form-label">模块路径</label>
    <div class="layui-input-inline">
      <input type="text" name="path" placeholder="请输入模块路径" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="updateBtn">修改</button>
      <button type="reset" id="U_reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>


<script type="text/javascript">

layui.use(['table','layer','form','upload','laydate','util', 'treeTable'], function(){
	  var table = layui.table;
	  var layer = layui.layer;
	  var form = layui.form;
	  var $ = layui.$;
	  var upload = layui.upload;
	  var laydate = layui.laydate;
	  var util = layui.util;
      var treeTable = layui.treeTable;
	  var currNow = 1; //声明一个全局变量存储当前页码
	  
	  // 渲染表格
	var insTb = treeTable.render({
          elem: '#demoTreeTb',
          url: globalData.server +'modules/',//提交到后台的地址
          where:{
            "token": globalData.token
          },
          toolbar: '#toolbarDemo',
          height: 'full-100',
          tree: {
              iconIndex: 2,//树形图标显示在第几列
              isPidData: true,
              parentId: 'parentId',//最上级的父级id
              idName: 'id',
              pidName: 'parentId'
          },
          defaultToolbar: ['filter', 'print', 'exports', {
              title: '提示',
              layEvent: 'LAYTABLE_TIPS',
              icon: 'layui-icon-tips'
          }],
          cols: [[
                  {type: 'numbers'},
                  {type: 'checkbox'},
                  {field: 'id', title: '模块编号'},
                  {field: 'name', title: '模块名称',minWidth: 120},
                  {field: 'path', title: '模块路径'},
                  {align: 'center', toolbar: '#barDemo', title: '操作', width: 150}
           ]],
           end: function (e) {
               form.render();
           },
           style: 'margin-top:0;'
      });
	  
	  // 工具列点击事件[修改与删除]
      treeTable.on('tool(demoTreeTb)', function (obj) {
    	  var data = obj.data;  //当前行的所有数据
          var event = obj.event;
          if (event === 'del') {
        	  layer.confirm('真的删除行么', function(index){
       	        //点击确定按钮的时候才会进来
       	        var id = obj.data.id;
       	        //在删除前先查找该类型下是否有子类型链接，如有就不让删除
       	        $.post(globalData.server+"modules/IsHaveSon?id="+id+"&token="+globalData.token,{},function(res){
       	        	if(res){//商品类型下有子商品类型链接就提示不能删除
       	        		layer.msg("该类型下有子类型连接，无法直接删除！");
       	        	}else{//没有内容就可进一般判断
       	        		$.post(globalData.server+"modules/selectIsHaveModules?id="+id+"&token="+globalData.token,{},function(res){
       	       	        	if(res){//为true说明该类型下有商品提示不能删除
       	       	        		layer.msg("该类型下有角色使用，不能直接删除！");
       	       	        	}else{//类型下没有商品链接就可进行删除
       	       	        		$.post(globalData.server+"modules/delModulesById?id="+id+"&token="+globalData.token,{
       	       	       	        },function(res){
       	       	       	        	if(res){
       	       	       	        		layer.msg("删除成功");
       	       	       	        		$("#btnReload").click();
       	       	       	        		layer.closeAll('page');
       	       	       	        	}else{
       	       	       	        		layer.msg("删除失败");
       	       	       	        		$("#btnReload").click();
       	       	       	        		layer.closeAll('page');
       	       	       	        	}
       	       	       	        },'json');
       	       	        	}
       	       	        	
       	       	        });
       	        	}
       	        	
       	        });
       	        
       	      });
          } else if (event === 'edit') {
        	  layer.open({
	        	  type: 1,
	        	  title:"修改页面",
	        	  area: ['600px', '600px'],
	        	  content: $('#U_form'), 
	        	  end:function(res){
                      //当点击关闭页面弹窗后触发重置按钮，清空内容
                      $("#U_reset").click();
                      $("#U_Lay_two_Level").hide();
                      $("#U_two_Level option").remove();
                  }
	        	});
	    	
	    	//在回显之前判断这行的内容是否为顶级类型及一级类型
             if(data.parentId == 0){
                 $("#U_Lay_two_Level").hide();
                 $("#U_two_Level option").remove();
             }else{
				  //查询所有一级分类
                 $("#U_Lay_two_Level").show();
                 $.ajax({
                     url: globalData.server+'modules/selectOneLevel',
                     data:{token:globalData.token},
                     type: 'post',
                     success: function (r) {
                         $('#U_one_Level').val('1');
                         for (var i = 0; i < r.length; i ++){
                             $('#U_two_Level').append("<option value='"+r[i].id+"' selected>"+r[i].name+"</option>");
                         }
                         $('#U_two_Level').val(data.parentId);
                         form.render('select');//菜单渲染 把内容加载进去
                     }
                 })

             }
           	 //要给修改的表单回显数据
	    	 form.val('U_form', data);

              //验证添加时模块类型名称不能重复
              //输入完名称，并在失去焦点后对名称进行校验
              $("#U_typeBlurEvent").blur(function(){
                  var moulesName = $("#U_typeBlurEvent").val();
                  if(moulesName != null && moulesName != ""){
                      if(moulesName == data.name){
                          $("#U_verifyTypeName").html("*");
                          $("#U_verifyTypeName").css({"color":""});
                          $("#U_typeBlurEvent").css({"border":""});//
                      }else{
                          $.post(globalData.server+"modules/juederModulesNameIsExist?id="+id+"&token="+globalData.token,{},function(res){
                              if(res){
                                  $("#U_verifyTypeName").html("模块名称已被使用");
                                  $("#U_verifyTypeName").css({"color":"red"});
                                  $("#U_typeBlurEvent").css({"border":"1px solid red"});//
                              }else{
                                  $("#U_verifyTypeName").html("*");
                                  $("#U_verifyTypeName").css({"color":""});
                                  $("#U_typeBlurEvent").css({"border":""});//
                              }
                          });
                      }
                  }else{
                      $("#U_verifyTypeName").html("模块名称不能为空");
                      $("#U_verifyTypeName").css({"color":"red"});
                      $("#U_typeBlurEvent").css({"border":"1px solid red"});//
                  }

              });
          }
      });
	  
	  
	  // 头部工具栏点击事件【添加与批量删除】
      treeTable.on('toolbar(demoTreeTb)', function (obj) {
          switch (obj.event) {
              case 'add':
            	  layer.open({
    	        	  type: 1,
    	        	  title:"添加页面",
    	        	  area: ['600px', '600px'],
    	        	  content: $('#A_form'),
    	        	  end:function(res){
                          //当点击关闭页面弹窗后触发重置按钮，清空内容
                          $("#A_reset").click();
                          $("#Lay_two_Level").hide();
                          $("#two_Level option").remove();
                      }
    	          });
                  break;
              case 'LAYTABLE_TIPS':
                  layer.msg('温馨提示：请注意身体，别太劳累！');
                  break;
          }
      });
	  
	  // 全部展开
      $('#btnExpandAll').click(function () {
          insTb.expandAll();
      });
      // 全部折叠
      $('#btnFoldAll').click(function () {
          insTb.foldAll();
      });
      // 刷新
      $('#btnReload').click(function () {
          insTb.reload();
      });
	  
	//自定义添加的验证规则，自带有phone，decimal
      form.verify({
          decimal:[/^[0-9]+([.]{1}[0-9]+){0,1}$/, '只能为小数或整数'],//验证价格
          number:[/^\d{0,8}$/,'只能为整数长度不过8位'],//验证数值
          age: [/^([1-9][0-9]{0,1}|100)$/, '年龄必须为100以内'],//验证年龄
          alikeTypeName: function(value){
              if($('#A_verifyTypeName').html()!="*" || $('#U_verifyTypeName').html()!="*"){
                  return '不能执行';
              }
          }
      });
	  
	  
	//监听顶级下拉框
      form.on('select(A_classIdLevel_one)', function (classIdLevelData) {
          if(classIdLevelData.value == 0){//当前如是顶级则隐藏二级类型的信息
              $("#Lay_two_Level").hide();
              $("#two_Level option").remove();
          }
          if (classIdLevelData.value == 1) {
              $("#Lay_two_Level").show();
			  //查询所有一级分类
              $.ajax({
                  url: globalData.server+'modules/selectOneLevel',
                  data:{token:globalData.token},
                  type: 'post',
                  success: function (data) {
                	  //alert($("#Lay_two_Level option").html());
                      for (var i = 0; i < data.length; i ++){
                          $('#two_Level').append("<option value='"+data[i].id+"' selected>"+data[i].name+"</option>");
                      }
                      form.render('select');//菜单渲染 把内容加载进去
                  }
              })
          }
      });
	
	
    //监听顶级下拉框  U_one_Level,U_two_Level
      form.on('select(U_classIdLevel_one)', function (classIdLevelData) {
          if(classIdLevelData.value == 0){//当前如是顶级则隐藏二级类型的信息
              $("#U_Lay_two_Level").hide();
              $("#U_two_Level option").remove();
          }
          if (classIdLevelData.value == 1) {
              $("#U_Lay_two_Level").show();
			   //查询所有一级分类
              $.ajax({
                  url: globalData.server+'modules/selectOneLevel',
                  data:{token:globalData.token},
                  type: 'post',
                  success: function (data) {
                      for (var i = 0; i < data.length; i ++){
                          $('#U_two_Level').append("<option value='"+data[i].id+"' selected>"+data[i].name+"</option>");
                      }
                      form.render('select');//菜单渲染 把内容加载进去
                  }
              })
          }
      });
	  
	  
	  //监听提交[添加按钮]
	  form.on('submit(addBtn)', function(data){
		 var one_p_id = "";
		 if(data.field.parentId == "" || data.field.parentId == null){
             one_p_id = 0;
		 }else{
             one_p_id = data.field.parentId;
		 }
	  
	    //添加请求，带上我们的参数。
	    $.post(globalData.server+"modules/insertMoules"+"?"+"token+" + globalData.token,{
	    	name:data.field.name,
            parentId:one_p_id,
	    	sort:data.field.sort,
	    },function(res){
	    	if(res){
	    		layer.close(layer.index);
	    		layer.msg("添加成功");
	    		$("#btnReload").click();
	    		layer.closeAll('page');
	    		table.reload('showAll', {
	    			  where: { //设定异步数据接口的额外参数，任意设
	    			  }
	    			  ,page: {
	    			    curr: 1 //重新从第 1 页开始
	    			  }
	    			}); //只重载数据
	    		//将表单中的数据进行清空【js的reset方法】
	    		$("#A_form")[0].reset();
	    		$("#Lay_two_Level").hide();
	            $("#two_Level option").remove();
	    	}else{
	    		layer.close(layer.index);
	    		layer.msg("添加失败或者模块名重复");
	    		$("#btnReload").click();
	    		layer.closeAll('page');
	    		$("#A_form")[0].reset();
	    		$("#Lay_two_Level").hide();
	            $("#two_Level option").remove();
	    	}
	    },'json');
	    
	    
	  });
	  //监听提交[修改按钮]
	  form.on('submit(updateBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
		var one_p_id = "";
		if(data.field.parentId == "" || data.field.parentId == null){
			 one_p_id = 0;
		 }else{
			 one_p_id = data.field.parentId;
		 }
	    
	    //修改请求，带上我们的参数。
	    $.post(globalData.server+"modules/updateModules"+"?"+"token+" + globalData.token,{
	    	id:data.field.id,
	    	name:data.field.name,
            parentId:one_p_id,
	    	sort:data.field.sort,
	    },function(res){
	    	if(res){
	    		layer.close(layer.index);
	    		layer.msg("修改成功");
	    		$("#btnReload").click();
	    		layer.closeAll('page');
	    		//将表单中的数据进行清空【js的reset方法】
	    		$("#U_form")[0].reset();
	    		$("#Lay_two_Level").hide();
	            $("#two_Level option").remove();
	    	}else{
	    		layer.close(layer.index);
	    		layer.msg("修改失败或者模块名重复");
	    		$("#btnReload").click();
	    		layer.closeAll('page');
	    		$("#U_form")[0].reset();
	    		$("#Lay_two_Level").hide();
	            $("#two_Level option").remove();
	    	}
	    },'json');
	  });
	  
	  
	  
	});


</script>
	
	
	</body>
</html>
